<template>
    <div class="box">
        <div v-if="sphz.length === 0">
            <div class="gouwuche_top">
                <img src="../img/购物车为空.png" alt="">
                <p>购物车为空</p>
                <div class="quguang">
                    <a href="">去逛逛</a>
                </div>

            </div>
        </div>
        <div class="box1" v-for="(item, index) in sphz">
            <div class="top">
                <div class="topimg" @click="">
                </div>
                <div class="quanxuan" :class="{ active: item.isxuan }" @click="xuan(index)"></div>
                <img src="https://kaola-haitao.oss.kaolacdn.com/1527168954438dianpu.png?x-oss-process=image/resize,w_60,h_0/quality,q_75/format,webp/ignore-error,1"
                    alt="">
                <p>多瑙河海外专营店</p>
            </div>
            <div class="boxBody">
                <div class="center">
                    <div class="bodyLeft">
                        <div class="topimg xuan" :class="{ active: item.isxuan }" @click="xuan(index)">
                        </div>
                    </div>
                    <div class="biankuang">
                        <div class="center1">
                            <img :src="item.img" alt="">
                        </div>
                        <div class="centerRight">
                            <div class="wenzi">
                                {{ item.name }}
                            </div>
                            <div class="btn">
                                <span class="anniu" @click="jian(index)">-</span>
                                <p>{{ item.num }}</p>
                                <span class="anniu " @click="jia(index)">+</span>

                            </div>
                            <div class="center2">
                                <p>￥{{ item.jg }}</p>
                                <img src="../img/删除.png" alt="" @click="shanchu(index)">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <div class="bottomTop">
                        <p>本仓总计（不含税）：</p>
                    </div>
                    <div class="bottomTop">
                        <p>{{item.danjia }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="nav">
        <div class="quanxuanBox">
            <div class="allBox">
                <div class=" quanxuan" :class="{ active: isquanxuan }" @click="quanxuan">
                </div>

            </div>
            <div><p>全选</p></div>
        </div>
        <div class="navCenter">
            <span>总价</span>
            <span>（不含税）</span>
            <span class="zongjia"> : ¥{{ sum }}</span>
            <p>商品税费:¥0</p>
        </div>
        <div class="jiesuan">
            <span @click="addsp">结算（{{ shuliang }}）</span>
        </div>
    </div>

</template>
<script setup lang='ts'>
import { ref, watch } from 'vue'
let sphz = ref([
    {
        img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/daa6f98dda2b994a59d94e2d0f3e1e07.png?f=webp&w=800&h=800",
        jg: 69,
        num: 1,
        name: "小米米家刮胡刀",
        danjia:69,
        isxuan: false
    },
    {
        img: "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202405231423_7c9cf592515f9afa8da1ca45ed39d943.jpg",
        jg: 90,
        num: 1,
        name: "米家记忆绵护颈枕Pro",
        danjia:90,
        isxuan: false
    },
    {
        img: "http://i8.mifile.cn/v1/a1/99758277-0a22-81ac-dda4-ccaf013dce0d.webp?w=800&h=800",
        jg: 9.9,
        num: 1,
        name: "小米巨能写中性笔10支装",
        danjia:9.9,
        isxuan: false
    },
]);
let tianjia = ref(
    {
        img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3533e919ed5b1f6cd796c8ea8fef0ae4.png?f=webp&w=800&h=800",
        jg: 69,
        num: 1,
        name: "小米米家喷墨打印一体机墨盒",
        isxuan: false
    },
)
// ...是展开运算符，表示将tianjia对象中的所有属性展开到当前位置
// function addsp() {
//     sphz.value.push({ ...tianjia.value });
// }
// console.log(sphz);
let isquanxuan = ref(false);
watch(sphz, (newVal) => {
    const allSelected = newVal.every(item => item.isxuan);
    isquanxuan.value = allSelected;
}, { deep: true, immediate: true });

function quanxuan() {
    // 切换isquanxuan的值，并同步更新商品列表的选中状态
    isquanxuan.value = !isquanxuan.value;
    sphz.value.forEach(item => {
        item.isxuan = isquanxuan.value;
    });
}

function xuan(index) {
    sphz.value[index].isxuan = !sphz.value[index].isxuan
}
function jia(index) {
    sphz.value[index].num++;
}
function jian(index) {
    if (sphz.value[index].num > 0) {
        sphz.value[index].num--;
    }
}
let sum = ref(0);
let shuliang = ref(0);
watch(sphz, (val) => {
    sum.value = 0
    shuliang.value = 0
    val.forEach((item) => {
        if (item.isxuan) {
            sum.value += item.num * item.jg;
            item.danjia = item.num * item.jg;
            shuliang.value += item.num;
       
        }
    })
}, { deep: true });
function shanchu(index) {
    sphz.value.splice(index, 1);
}
</script>
<style scoped>
.box {
    font-size: 0.145rem;
}

.gouwuche_top {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 5rem;
    background-color: #ffffff;
    color: #666;
    font-size: 0.16rem;
    padding-top: 0.6rem;
    ;
}

.gouwuche_top img {
    width: 1rem;
    height: 1rem;
}

.gouwuche_top a {
    color: #fff;
    text-decoration: none;
}

.quguang {
    width: 1.2rem;
    height: 0.4rem;
    text-align: center;
    border-radius: 0.1rem;
    background-color: #ff0000;
    line-height: 0.4rem;
    margin-top: 0.3rem;

}

.boxBody {
    background-color: #ffffff;
    padding-right: 0.1rem;
    margin-bottom: 0.12rem;
}

.box input {
    width: 0.16rem;
    height: 0.16rem;
}

.top {
    height: 0.4rem;
    background-color: #fafafa;
    padding-left: 0.16rem;
    display: flex;
    align-items: center;
}

.top img {
    width: 0.18rem;
    height: 0.18rem;
    margin-left: 0.08rem;
    margin-right: 0.1rem;
}

.xuan {
    width: 0.16rem;
    height: 0.16rem;
    background-image: url(../img/未选中.png);
    background-size: 100% 100%;
}

.xuan.active {
    width: 0.16rem;
    height: 0.16rem;
    ;
    background-image: url(../img/下载.png);
    background-size: 100% 100%;
}

.quanxuan {
    width: 0.16rem;
    height: 0.16rem;
    background-image: url(../img/未选中.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.quanxuan.active {
    background-image: url(../img/下载.png);
    background-size: 0.16rem 0.16rem;
    background-repeat: no-repeat;
}

.center {
    padding-left: 0.16rem;
    display: flex;
    align-items: center;

}

.center1 {
    background-color: #ffffff;
}

.center1 img {
    width: 0.9rem;
    height: 0.9rem;
}

.centerRight {
    width: 2.45rem;
    display: flex;
    flex-direction: column;
}

.center .bodyLeft {
    width: 0.2rem;
    height: 0.2rem;
    margin-right: 0.1rem;
    ;
}

.center .bodyLeft img {
    width: 0.16rem;
    height: 0.16rem;
}

.wenzi {
    font-size: 0.13rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.centerRight .anniu {
    text-align: center;
    font-size: 0.16rem;
    color: #333;
    width: 0.25rem;
    height: 0.25rem;
    line-height: 0.2rem;
    border: #333 solid 0.01rem;
}

.btn {
    margin-top: 0.1rem;
    display: flex;
    justify-content: end;
}

.btn p {
    color: #333;
    text-align: center;
    width: 0.3rem;
    height: 0.25rem;
    line-height: 0.2rem;
    border-top: #333 solid 0.01rem;
    border-bottom: #333 solid 0.01rem;
}

.center2 img {
    width: 0.18rem;
    height: 0.18rem;
}

.center2 {
    margin-top: 0.1rem;
    display: flex;
    justify-content: space-between;
    color: #ff0000;
}

.biankuang {
    width: 3.26rem;
    display: flex;
    padding-left: 0.06rem;
}

.bottom {
    height: 0.44rem;
    margin-top: 0.1rem;
    display: flex;
    justify-content: end;
}

.bottomTop {
    display: flex;
    flex-direction: column;
    align-items: end;
}

.nav {
    width: 3.75rem;
    height: 0.49rem;
    border-top: solid 0.01rem #ccc;
    border-bottom: solid 0.01rem #ccc;
    display: flex;
    background-color: #fff;
    position: fixed;
    bottom: 0.5rem;

}

.nav .quanxuan img {
    width: 0.2rem;
    height: 0.2rem;
    border-radius: 0.3rem;
    margin-left: 0.15rem;
}

.quanxuanBox {
    width: 0.61rem;
    height: 0.49rem;
    display: flex;
    align-items: center;
}

.allBox {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-left: 0.1rem;
}
.quanxuanBox p{
    font-size: 0.12rem;
}


.navCenter {
    width: 2.33rem;
    height: 0.49rem;
    font-size: 0.13rem;
    text-align: right;
    padding-right: 0.1rem;
    padding-top: 0.085rem;
}

.navCenter p {
    color: #999999;
}

.jiesuan {
    width: 0.8rem;
    height: 0.49rem;
    line-height: 0.49rem;
    background-color: red;
    text-align: center;
}

.jiesuan span {
    font-size: 0.15rem;
    color: #ffffff;
}

.zongqian {
    color: rgb(255, 0, 0);
}
</style>
